<template>
  <div>
    姓: <input type="text"  v-model="person.firstName">
    <br>
    名: <input type="text"  v-model="person.lastName">
    全名: <input type="text"  v-model="person.fullName">
  </div>
</template>
<script>
import { reactive,computed  } from 'vue';

export default {
  name: "Demo",
  // computed:{
  //   fullName(){
  //     return this.person.firstName+"-"+this.person.lastName
  //   }
  // },
  setup(props, context) {
    // console.log("setup")
    // console.log(props);
    // console.log(context.attrs);
    console.log(context.slots);
    let person = reactive({
      firstName: "F",
      lastName: "JJ"
    })

    //简写姓氏
    // person.fullName = computed(()=>{
    //   return person.firstName+"-"+person.lastName
    // })

    
    //读写形式
     person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        const arr = value.split("-");
        person.firstName = arr[0];
        person.lastName = arr[1];
      }
    })
    //返回一个对象，常用
    return {
      person,
    };
  }
};
</script>
  
  <style>
</style>
  
 